<template>
  <div>
    <div id="main">
      <div class="cmdBox">
        <div class="cmd-item" v-for="(item ,index) in items" :key="index">
          <div class="label">{{item.name}}</div>
          <el-button  @click="clickItem(item,false)" v-hasPermi="['system:user:edit']">阈值-</el-button>
          <el-button type="primary" @click="clickItem(item,true)" v-hasPermi="['system:user:edit']">阈值+</el-button>

          <div class="currentValue">{{item.value}}</div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {sendCmd,getData} from "@/api/IOT/index"
export default {
  name: "index",
  data(){
    return {
      items:[
        {name:"烟雾阈值",v1:"3",v2:"4",p:"S_S",value:""},
        {name:"温度阈值",v1:"1",v2:"2",p:"T_T",value:""},
      ],
      timer:null
    }
  },
  created() {
    this.getAllData()
    this.timer = setInterval(()=>{
      this.getAllData()

    },1000)

  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods:{
    clickItem(item,tag){
      let cmd = ""
      if(tag) {
        cmd = item.v2
      }else {
        cmd = item.v1

      }
      sendCmd({
        cmd
      }).then(res=>{
        this.$message({
          message:"命令已下发",
          type:"success"
        })
      })

    },
    async getAllData(){
      let q = []
      this.items.map(item=>{
        q.push(getData({
          p:item.p
        }))
      })
      let result = await Promise.all(q)
      result.map((item,index)=>{
        // console.log(item)
        this.items[index].value = item.data.value
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cmd-item {
  display: flex;
  align-items: center;
  height: 100px;
  margin-left: 100px;
  .label {
    font-weight: bold;
    margin-right: 20px;
  }
}

.currentValue {
  font-size: 32px;
  margin-left: 50px;
}
</style>
